<template>
    <div class="order_catchjdlogs">
        <!-- <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：生产管理>抓单管理>抓单失败记录</div>
        <div style="height: 16px; width: 100%; background: #F9F9F9;"></div> -->

        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
          当前位置：
          <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
          抓单管理>
          抓单失败记录
        </div>

        <div class="team">
            <div class="powertop" style="padding: 20px; font-size: 18px; color: #666666;">
              {{name}}抓单失败记录

<!--                <router-link class="powertopli" to="/order_catch/order_catchpdd">拼多多抓单</router-link>
                <router-link class="powertopli" to="/order_catch/order_catchtm">天猫抓单</router-link> -->
            </div>
            <div class="centerall">

                <!-- <div class="t-img">
                    <img src="../../../static/img/catchjd.png">
                </div> -->
                <div class="back" @click="back1"><i class="el-icon-arrow-left"></i>返回上层</div>
                <div class="flex" style="justify-content: space-between;">
                  <div class="flex">
                    <div style="margin-right: 20px;"><el-input v-model="search.waibu"  placeholder="外部订单号"></el-input></div>
                    <div style="margin-right: 20px;">
                      <el-select v-model="search.type" clearable  placeholder="抓单状态:">
                        <el-option :label="item.name" :value="item.id" v-for="item in shibaiyuanyins" :key="item.id"></el-option>
                      </el-select>
                    </div>
                    <div>
                      <el-button round type="danger" @click='sousuo'>搜索</el-button>
                    </div>
                  </div>
                  <div>
                    <el-button round type="danger" @click='loudan'>批量重新抓单</el-button>
                  </div>
                </div>
                <div style="margin-top: 20px;" v-loading="loading">
                  <el-table :data="tableData"  style="width: 100%;"  :header-cell-style="rowClass" :cell-style="cellClass" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="source_id" label="外部订单号"></el-table-column>
                    <el-table-column prop="created_at" label="时间"></el-table-column>
                    <el-table-column prop="type_name" label="抓单状态"></el-table-column>
                    <el-table-column label="解决办法">
                          <template slot-scope="scope">
                            <el-tooltip placement="top">
                              <div slot="content">
                               {{scope.row.programme}}
                              </div>
                              <el-button size="medium" type="text">解决办法</el-button>
                            </el-tooltip>
                            <el-tooltip placement="top">
                              <div slot="content">
                                {{scope.row.reason}}
                              </div>
                              <el-button size="medium" type="text">详情</el-button>
                            </el-tooltip>
                          </template>


                    </el-table-column>
                  </el-table>
                 <div class="fenye">
                    <el-pagination  background layout="total,prev, pager, next"  :current-page="page"  @current-change="fanye"  :page-size="page_size"  :total="total" ></el-pagination>
                  </div>
                </div>
            </div>

        </div>

    </div>

</template>

<script>
    import axios from 'axios'
    export default{
    	name : "order_catchjdlogs",
    	data(){
    		return {
          tableData: [],
          total: 0,
          page_size: 20,
          page: 1,
          loading: true,
          id: '',
          search:{
            waibu:"",
            type:""
          },
          multipleSelection:[],
          name:"",
          shibaiyuanyins:[]
        }
      },
    	created(){
        this.id = this.$route.query.id
        this.name = decodeURIComponent(this.$route.query.name)
        this.getData()


        axios.get('/api/plan-market/order/fail/type')
          .then(response => {
            if(response.data.msg.code == 0){
              this.shibaiyuanyins = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          })
    	},
    	mounted(){

    	},
    	methods: {
        back1:function(){
          this.$router.back(-1)
        },
        loudan:function(){
            var that = this
            var list = []
            for(let i in this.multipleSelection){
              list.push(this.multipleSelection[i].source_id)
            }

            axios.post('/api/plan-market/out-store/order/refetch',{id:this.id,orders:list})
              .then(response => {
                if(response.data.msg.code == 0){
                    that.$message({
                      message: '抓单已提交，请稍后查看。',
                      type: 'success'
                    });
                    that.clearText()
                    that.loudanlog = false
                }else{
                    that.$message.error(response.data.msg.info);
                }
              })
        },
        seedetail:function(){

        },
        jiejue:function(){

        },
        handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val)
        },
        rowClass({ row, rowIndex }) {
          return "background:#eaeaea;text-align:center;font-size:14px;font-weight:normal;color:#000";
        },
        cellClass({ row, column, rowIndex, columnIndex }) {
          return "text-align:center;font-size:14px;color:#000";
        },
        sousuo:function(){
          this.page = 1
          this.getData()
        },
        getData(){
          // axios.get('/api/gth/orderslogs?source=jd&shop_id='+ this.id+'&page='+this.page+'&page_size='+this.page_size)
          axios.get('/api/plan-market/order/logs/get?source_id='+this.search.waibu+'&id='+this.id+'&type='+this.search.type+'&page='+this.page+'&page_size='+this.page_size)
            .then(response => {
            if(response.data.msg.code == 0){
              this.tableData = response.data.data.data
              // for(let i in this.tableData){
              //   this.tableData[i].reason = this.tableData[i].status === 0 ? this.tableData[i].reason : ''
              //   this.tableData[i].status = this.tableData[i].status === 0 ? '未抓' : '已抓'
              // }

              this.total = response.data.data.total
              this.loading = false
            }else{
              this.$message.error(response.data.msg.info);
            }

          })
        },
        //翻页
        fanye: function(val) {
          this.loading = true
          this.page = val;
          this.getData();
        },
      },
    }
</script>

<style lang="scss" scoped>
    .order_catchjdlogs{
      /deep/ .el-button--danger {
          color: #FFF;
          background-color: #2974FF;
          border-color: #2974FF;
      }
      /deep/ .el-button--danger.is-plain {
          color: #EEF7FF !important;
          background: #EEF7FF !important;
          border-color: #18A0FB !important;
      }
      .flex{ display: flex;}
        .says48{ line-height: 25px; padding: 20px 0;}
        .team{ background: #F9F9F9;

            .powertop{ display: flex; width: 640px;}
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272;  font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .centerall{ padding: 20px; background: #FFFFFF; color: #666;
                .t-img{ margin-bottom: 20px; position: relative;
                    img{ width: 100%;}
                    .t-email{ position: absolute; background: #FFFFFF; color: #DD2727; font-size: 14px; right: 20px; padding: 5px 10px; top: 26px; cursor: pointer;}
                    .t-48{ position: absolute; background: #FFFFFF; color: #DD2727; font-size: 14px; right: 160px; padding: 5px 10px; top: 26px; cursor: pointer;}
                }
                .back{ margin-bottom: 20px;
                  a{ color:#409EFF; }
                }
                .cooktitle{ font-size: 14px; font-weight: bold; margin: 20px 0;}
                .cookp{margin-bottom: 10px;
                  img{ max-width: 90%;}
                }
            }

        }
      .fenye {
        text-align: right;
        margin: 20px 0;
      }

    }
</style>
